<template>
  <div class="app-container">
    <el-tabs v-model="tabsActiveName" @tab-click="handleTabClick">
      <el-tab-pane label="活动投诉" name="activity">
        <el-form :model="activityComplainQueryParams" ref="activityComplainQueryParams" :inline="true">
          <el-form-item label="投诉人:" prop="nickname">
            <el-input
              v-model="activityComplainQueryParams.nickname"
              placeholder="请输入微信昵称"
              clearable
            />
          </el-form-item>
          <el-form-item label="报名姓名:" prop="enrollName">
            <el-input
              v-model="activityComplainQueryParams.enrollName"
              placeholder="请输入报名姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="联系方式:" prop="mobile">
            <el-input
              v-model="activityComplainQueryParams.mobile"
              placeholder="请输入联系方式"
              clearable
            />
          </el-form-item>
          <el-form-item label="活动名称:" prop="activityId">
            <ActivitySelector
              style="width: 300px"
              placeholder="请选择活动"
              v-model="activityComplainQueryParams.activityId"
              retrun-type="string"
              :not-show-all-option="true"
              clearable
            />
          </el-form-item>
          <el-form-item label="处理状态:" prop="handleStatus">
            <el-select v-model="activityComplainQueryParams.handleStatus" placeholder="请选择" clearable>
              <el-option
                v-for="dict in dict.type.activity_complain_handle_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投诉时间:">
            <el-date-picker
              v-model="activityComplainQueryParams.dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="activityComplainResetQuery">重置</el-button>
            <el-button type="primary" size="mini" @click="activityComplainHandleQuery">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="activityComplainDataList">
          <el-table-column label="投诉用户">
            <template slot-scope="scope">
              <div class="memberInfo">
                <image-preview :src="scope.row.avatarUrl" :width="30" :height="30"/>
                <div class="nickname">
                  {{ scope.row.nickname }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报名信息" prop="enrollName"/>
          <el-table-column label="联系方式" prop="mobile"/>
          <el-table-column label="投诉活动" prop="activityTitle"/>
          <el-table-column label="投诉时间" prop="createTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="投诉内容" prop="reason"/>
          <el-table-column label="投诉描述" prop="describe"/>
          <el-table-column label="活动截图" prop="img">
            <template slot-scope="scope">
              <image-preview :src="scope.row.img" :width="50" :height="50"/>
            </template>
          </el-table-column>
          <el-table-column label="处理状态" prop="handleStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.activity_complain_handle_status" :value="scope.row.handleStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" prop="handleTime">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.handleTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="restoreVisitAuth(scope.row)"
              >恢复访问权限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="activityComplainTotal>0"
          :total="activityComplainTotal"
          :page.sync="activityComplainQueryParams.pageNum"
          :limit.sync="activityComplainQueryParams.pageSize"
          @pagination="getActivityComplainList"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ActivitySelector from "@/components/yjj/ActivitySelector";
import { activityComplainList,restoreVisitAuth } from "@/api/triones/complain";
export default {
  name: "index",
  components: { ActivitySelector },
  dicts: ['activity_complain_handle_status'],
  data() {
    return {
      tabsActiveName: 'activity',
      loading: true,
      activityComplainQueryParams: {
        pageNum: 1,
        pageSize: 10,
        nickname: undefined,
        enrollName: undefined,
        mobile: undefined,
        activityId: undefined,
        handleStatus: '0',
        handleType: 'activity_complain',
        dateRange: []
      },
      activityComplainDataList: [],
      activityComplainTotal: 0
    }
  },
  created() {
    this.getActivityComplainList()
  },
  methods: {
    handleTabClick(tab, event) {
      console.log(tab, event)
    },
    getActivityComplainList() {
      this.loading = true;
      activityComplainList(this.activityComplainQueryParams).then(response => {
        this.activityComplainDataList = response.rows;
        this.activityComplainTotal = response.total;
        this.loading = false;
      })
    },
    /** 活动投诉重置 */
    activityComplainResetQuery() {
      this.resetForm("activityComplainQueryParams");
      this.activityComplainQueryParams.dateRange = [];
      this.activityComplainHandleQuery();
    },
    /** 活动投诉检索 */
    activityComplainHandleQuery() {
      this.activityComplainQueryParams.pageNum = 1
      this.getActivityComplainList();
    },
    /** 恢复访问权限 */
    restoreVisitAuth(row) {
      this.$modal.confirm('是否确认恢复访问权限？').then(() => {
        restoreVisitAuth(row.id).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getActivityComplainList();
        });
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.memberInfo{
  display:flex;
  width: 200px;
  text-align: center;
.nickname {
  align-content: center;
  padding-left: 10px;
}
}
</style>
